@import 'variables.less';
@LTHeight: 1.5rem; /*产线状态 当前产品 box heighr*/
@LTWidth: 3rem;
@bgc2: rgba(18, 37, 79, .2);
@fontC: #9e9e9e;
@boxMinHeigth: 110px;

.layui-table[lay-even] tr:nth-child(even){
    background-color: rgba(89,103,164,.25);
}
.layui-table{
    margin: 0;
    color: @fontC;
    text-align: center;
}

/*左*/
.page-left{
    /*width: calc(100% / 3 * 2);*/
    width: calc(100% / 3);
    height: 100%;
    /*margin-right: @gap;*/
}
.page-left > div:first-child{
    width: 100%;
    height: @LTHeight;
    min-height: 100px;
    /*display: flex;*/
    /*justify-content: space-between;*/
}
.page-left > div{
    /*width: 50%;*/
    width: 100%;
    margin-bottom: @gap;
}
.page-left > div:last-child{
    width: 100%;
    height: 100px;
}
.page-left > div:not(:first-child){
    height: calc((100% - 3 * @gap - @LTHeight) / 3);
    min-height: @boxMinHeigth;
}

.line-status > div{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.line-status .circle-wrap{
    width: 1rem;
    height: 1rem;
    background-image: url("/statics/imgs/circle.png");
    background-size: 100% 100%;
    position: relative;
}
.line-status .circle-wrap.green{
    background-image: url("/statics/imgs/circle-green.png");
}
.line-status .circle-wrap.gray{
    background-image: url("/statics/imgs/circle-gray.png");
}
.line-status .circle-wrap.yellow{
    background-image: url("/statics/imgs/circle-yellow.png");
}
.line-status .circle-wrap.red{
    background-image: url("/statics/imgs/circle-red.png");
}

.line-status .circle{
    width: 100%;
    height: 100%;
    text-align: center;
    border-radius: 50%;
    position: relative;
    padding-top: 0.2rem;
}
.line-status .circle h2{
    font-size: 0.24rem;
}
.line-status .circle-wrap .circle:before{
    content: '';
    width: 78%;
    height: 78%;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: inset 0 0 0.11rem 0.04rem #1a5d96;
    z-index: -1;
}
.line-status .circle span{
    font-size: 12px;
}
.line-status .circle-wrap.green .circle:before{
    box-shadow: inset 0 0 0.11rem 0.04rem #59e001;
}
.line-status .circle-wrap.gray .circle:before{
    box-shadow: inset 0 0 0.11rem 0.04rem #616161;
}
.line-status .circle-wrap.yellow .circle:before{
    box-shadow: inset 0 0 0.11rem 0.04rem yellow;
}
.line-status .circle-wrap.red .circle:before{
    box-shadow: inset 0 0 0.11rem 0.04rem red;
}

/*当前产品*/
.page-left > div:first-child .product{
    width: calc(100% - @LTWidth - @gap);
    height: 100%;
}
.product > div{
    min-height: 90px;
    overflow-y: auto;

    width: 0.8rem;
}
.product table{
    width: 99%;
    margin: 0 auto;
    color: @fontC;
}
.product table th{
    text-align: center;
}

#capacityChart{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    overflow-y: auto;
}
#capacityChart > div{
    height: 0.3rem;
    line-height: 0.3rem;
    border-radius: 0.3rem;
    padding: 0 0.1rem;
}
#capacityChart > div > *{
    float: left;
}
#capacityChart > div > span{
    display: inline-block;
    /*text-align: right;*/
    font-size: 0.12rem;
}
#capacityChart > div > span:last-child{
    text-align: right;
}

#capacityChart > div > span em{
    font-size: 0.14rem;
}
#capacityChart .process{
    width: 54%;
    margin: 0.07rem 0.15rem;
    height: 0.15rem;
    background-color: rgba(18,37,79,.7);
    float: left;
    border-radius: 0.3rem;
    box-shadow: 0 0 2px #4e5c98;
}
#capacityChart .process > div{
    height: 100%;
    border-radius: 0.3rem;
    max-width: 98%;
    background: linear-gradient(88deg, #3959FF, #2EC8CF);
    text-align: right;
    font-size: 0.12rem;
    line-height: 0.15rem;
    color: @fontcolor;
}

/*生产现场*/
.video > div{
    position: relative;
}
.video video{
    max-width: 100%;
    height: calc(100% - 6px);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.page-left > div:last-child {
    width: 100%;
}

/*中间*/
.page-mid > div{
    min-height: @boxMinHeigth;
}
.page-mid{
    width: calc(100% / 3 - @gap * 2);
    height: calc(100% - 0.4rem);
    margin-top: 0.4rem;
    margin-right: @gap;
    margin-left: @gap;
    position: relative;
}
.page-mid .qualified-rate{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: calc((100% + 0.4rem - @LTHeight) / 3);
}

/*右*/
.page-right{
    width: calc(100% / 3);
    height: 100%;
}
.page-right > div{
    width: 100%;
    height: calc((100% - 3 * @gap) / 4);
    min-height: @boxMinHeigth;
    margin-bottom: @gap;
}

/*产品特性 雷达图*/
.prod-feature > div{
    display: flex;
    flex-wrap: nowrap;
}
.prod-feature #featureChart{
    width: 100%;
    height: 100%;
}
.layui-table[lay-size=sm] td, .layui-table[lay-size=sm] th{
    padding: 0.03rem;
}
.prod-feature #chart-legend{
    width: 50%;
    height: 100%;
}
.prod-feature #chart-legend span{
    width: 0.02rem;
    height: 0.12rem;
    margin-right: 2px;
    position: relative;
    display: inline-block;
    padding: 0 0.03rem;
    font-size: 0.12rem;
    text-align: center;
    background-color: #FF5722;
    color: #fff;
    border-radius: 2px;
}
.prod-feature #chart-legend span.c1{
    background-color:  rgba(0,184,253,.8); /*#59E001;*/
}
.prod-feature #chart-legend span.c2{
    background-color: rgba(61,227,199,.8); /* #9900FF*/
}

/*异常信息 上下无缝滚动*/
.alarm-info-scroll {
    overflow:hidden;
    font-size: 0.14rem;
}
.alarm-info-scroll ul {
    width: 100%;
    /*height: 100%;*/
    padding: 0 0.1rem;
    box-sizing: border-box;
}
.alarm-info-scroll ul li {
    width:100%;
    margin-bottom: 0.05rem;
    box-sizing:border-box;
}
.alarm-info li em{
    color: @red;
}
.layui-carousel>[carousel-item]:before{
    content: '';
}

.printBox{
    position: relative;
}

#line-img{
    width: 40%; /* 45%  */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: -100;
}

#line-img img{
    width: 100%; /* 60% */
    display: inline-block;
    /*position: absolute;*/
    /*top: -160px;*/
}
/*
#line-img img:first-child{
    left: 0;
}
#line-img img:last-child{
    right: 0;
    !*left: 40%;*!
}
#line-img div img{
    width: 100%;
    position: relative;
}*/

/*!* 产线图片上的企业logo*!
#line-img div:before{
    content: '';
    background: url(/statics/imgs/hybd.png) no-repeat;
    background-size: 100%;
    display: inline-block;
    position: absolute;
    left: 60px;
    top: 135px;
    width: 80px;
    height: 40px;
    transform: rotateZ(4deg);
}
!* 产线图片上的产线名称*!
#line-img div:after{
    content: attr(data-line);
    display: inline-block;
    position: absolute;
    left: 155px;
    top: 115px;
    color: #000;
    transform: rotateZ(340deg);
}*/


.alarm-info-scroll .rowup{
    -webkit-animation: 50s rowup linear infinite normal;
    animation: 50s rowup linear infinite normal;
    position: relative;
}
.alarm-info-scroll:hover .rowup{
    animation-play-state:paused;
    -webkit-animation-play-state:paused;
}

/*小屏幕下 style*/
@media only screen and (max-width: 768px){
    section.printBox{
        flex-wrap: wrap;
    }
    section.printBox > div:not(:last-child){
        width: 100%;
    }
    .page-left > div:first-child{
        width: 60%;
    }
    #line-img{
        top: 0;
        left: 100%;
        transform: translate(-100%,0);
    }
    .page-left, .page-mid{
        height: initial;
    }
    .page-mid .qualified-rate{
        position: inherit;
    }
}